<template>
	<view>
		<!-- 搜索 -->
		<uni-search-bar bgColor="#ffffff" :cancelText='" "' @focus="focus" ></uni-search-bar>
		<!-- 交易倒计时 -->
		<!-- <view class="countdown">
			<text style="font-weight: bold; letter-spacing:3rpx;">交易时间倒计时</text>
			<uni-countdown class="countdown_time" color="#FFFFFF" background-color="#ff0000" border-color="#00B26A"
				:day="1" :hour="2" :minute="30" :second="0"></uni-countdown>
		</view> -->
		<!-- 分类 -->
		<side-category class="category" v-model="currentIndex" :customNumStyle="{ color: 'red' }" :list="flower_list"
			active-color="#4CD964" :width="170" actiive-height="60%" actiive-width="3%" @change="change">
			<view>
				<list-goods :loading="loading" :product="flower_detail" ></list-goods>
			</view>
		</side-category>

	</view>

</template>

<script>
	import sideCategory from '@/components/mochen-side-category/mochen-side-category.vue';
	import listGoods from '@/components/list-goods/list-goods.vue';
	import badgeMix from "../../mixin/tabbar-badge.js";
	export default {
		mixins: [badgeMix],
		data() {
			return {
				// 左侧
				flower_list: [],
				// 右侧
				flower_detail: [],
				currentIndex: 0,
				flowerSortId: 1,
				loading:''
			}
		},
		props: {
			listKey: {
				type: String,
				default: 'name'
			},
			listNumKey: {
				type: String,
				default: 'num'
			},
			customItemStyle: {
				// items style
				type: Object,
				default () {
					return {};
				}
			}


		},
		components: {
			sideCategory,
			listGoods
		},
		onLoad() {
			this.flowerCate()
			this.flowerDatil(this.flowerSortId)
		},
		watch:{
			flowerSortId(nweValue,oldValue){
				this.$store.commit('m_cart/updataflowerSortId',nweValue)
			}
		},
		methods: {
			focus(){
				uni.navigateTo({
					url:"../searchFlower/searchFlower"
				})
			},
			change(currentIndex) {
				this.flowerSortId = this.flower_list[currentIndex].id
				// console.log(this.flowerSortId)
				this.flowerDatil(this.flowerSortId)
			},
			// 左侧
			flowerCate() {
				uni.$http.get('/product-server/api/flowersort/v1/query/list').then(res => {
					this.flower_list = res.data.data
					this.flowerSortId = this.flower_list[0].id
				})
			},
			// 右侧
			flowerDatil(flowerSortId) {
				uni.$http.get(`/product-server/api/product/v1/sortid/${flowerSortId}`).then(res => {
					this.flower_detail = res.data.data
					setTimeout(()=>{
						this.loading=false
					},700)
				})
			}
		}
	}
</script>

<style scoped>
	.countdown {
		display: flex;
		align-items: center;
		width: 100%;
		height: 50rpx;
	}

	.countdown_time {
		margin-left: 20rpx;
	}
</style>
